<!-- /monitor 监控页面 ， 海康威视接口调用，使用api， 多画面展示 -->
<template>
  <div class="monitor-box">
    <topBar title="智慧集约化驾驶舱系统" :show="true" />


<div class="content">
      <div class="content-left">
        <div class="line-title">设备监控列表</div>
        <div class="left-content">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small">
            <i class="el-icon-search el-input__icon" slot="suffix"> </i>
          </el-input>

          <el-tree
            class="filter-tree"
            :data="channels"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="filterTree"
            highlight-current
            node-key="id"
          >
          <div class="custom-tree-node" :class="data.class" slot-scope="{ node, data }">
            <div @click="shwoMonitor(data)" class="node-label">
                <span>{{ node.label }}</span>
                
                <span class="right green" v-if="data.online == 'true'">{{ '在线'}}</span>
                <span class="right red" v-if="data.online == 'false'">{{ '离线' }}</span>
            </div>              
          </div>
          </el-tree>
        </div>
      </div>
      <div class="content-right">
        <div class="right-title">智能档案库视频监控
          <!-- <i class="el-icon-s-grid icon-right" @click="changeWndNum(1)"></i>
          <i class="el-icon-s-grid icon-right" @click="changeWndNum(2)"></i>
          <i class="el-icon-s-grid icon-right" @click="changeWndNum(3)"></i>
          <i class="el-icon-s-grid icon-right" @click="changeWndNum(4)"></i> -->
        </div>
        <div class="right-content" >
          <!-- <el-main> -->
            <div id="divPlugin" class="plugin"></div> 
            <!-- <el-button @click="clickLogin">开始登录</el-button>
            <el-button @click="clickStartRealPlay(1)">开始预览</el-button>
            <el-button @click="clickLogout">退出</el-button>
            <el-button @click="changeWndNum(1)">changeWndNum</el-button> -->
          <!-- </el-main> -->
        </div>

      </div>
    </div>



    
  </div>
</template>

<script>
import topBar from "@/components/topBar.vue";
export default {
    name: "monitor",
    components: {
      topBar,
    },
    watch: {
      filterText(val) {
        this.$refs.filterTree.filter(val);
      },
    },
    data() {
        return {
          filterText: "",
          defaultProps: {
            children: "children",
            label: "name",
          },

          g_iWndIndex: 0,
          szDeviceIdentify: '',
          deviceport: '',
          channels: [
            // {id: 1,
            // name: '000000',
            // online: 'true'},
            // {id: 2,
            // name: '2222',
            // online: 'false'}
          ],
          ip: '192.168.0.221',
          port: '80',
          username: 'admin',
          password: 'abcd1234',
          iRtspPort: '',
          monitorId: ''
        }
    },
    mounted() {
      // 获得地址传参的id
      this.monitorId = this.$route.query.id || 1
        this.init()
        this.$refs.filterTree.setCurrentKey(this.monitorId); 
    },
    methods: {
      showSquared() {
        this.changeWndNum(2)
        },
      // 展示对应的通道
      shwoMonitor(data) {
        console.log(data)
        this.clickStartRealPlay(data.id)

        this.$nextTick(() => {
          this.$refs.filterTree.setCurrentKey(data.id); 
        });

      },
      // 筛选监控列表
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      // 窗口分割数
        changeWndNum(iType) {
            iType = parseInt(iType, 10);
            WebVideoCtrl.I_ChangeWndNum(iType);
        },
        // 初始化
        init() {

          let self = this
            // 初始化插件参数及插入插件
            WebVideoCtrl.I_InitPlugin('100%', '100%', {
              bWndFull: true, // 但窗口双击全屏
              iPackageType: 2, // 封装格式 无插件只能是2
              iWndowType: 1, // 分屏类型 1*1 2*2 3*3 4*4 ....
              bNoPlugin: true, // 开启无插件模式
              bDebugMode: true, // JS 调试模式

              cbSelWnd: function (xmlDoc) {
                // 窗口选中事件回调函数
                  self.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
                  var szInfo = "当前选择的窗口编号：" + self.g_iWndIndex;
                  console.log('szInfo', szInfo);
              },
              cbDoubleClickWnd: function (id, isAll) {
                // 窗口双击回调函数
                console.log(id, isAll, 'id, isAll')

              },


              cbInitPluginComplete: function () {
                console.log("初始化成功！");
                WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

                console.log(WebVideoCtrl.I_ChangeWndNum(1), 'WebVideoCtrl.I_ChangeWndNum(1);')
                setTimeout(()=> {
                  WebVideoCtrl.I_ChangeWndNum(1);
                }, 1000)


                self.clickLogin()
              }
            });
        },
        // 退出
        clickLogout() {
          let self = this
          self.channels = []
  
          if (null == self.szDeviceIdentify) {
              return;
          }
          let iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify);
          if (0 == iRet) {
              self.getChannelInfo();
              self.getDevicePort();
          }

        },
          

        // 登录
        clickLogin() {
          let self = this
          console.log(this.ip+"_"+this.port, 'oooooo')
            if (!this.ip || !this.port) {
                return
            }
            self.szDeviceIdentify = self.ip+"_"+self.port
            
            WebVideoCtrl.I_Login(this.ip, 1, this.port, this.username, this.password,                 
            {
              success: function(xmlDoc) {
                self.getChannelInfo() // 获取模拟通道
                self.getDevicePort() // 获取端口 （影响不大）
              }   
            })
        },
        // 获取模拟媒体通道
        getChannelInfo() {
            let self = this
            if (!self.szDeviceIdentify) {
                return
            }
            WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
              async: false,
              success: function (xmlDoc) {
                let oChannels = $(xmlDoc).find("VideoInputChannel");
                console.log('获取模拟通道成功', oChannels)
                $.each(oChannels, function (i, val) {
                  let id = $(val).find("id").eq(0).text(),
                  name = $(val).find("name").eq(0).text();
                  if (!name) {
                      name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
                  }
                  self.channels.push({
                      id: id,
                      name: name
                  })
                });
              },
              error: function (status, xmlDoc) {
                  console.log('获取模拟通道失败', status, xmlDoc)
              }
          });

          WebVideoCtrl.I_GetDigitalChannelInfo(self.szDeviceIdentify, {
              // async: false,
              async: true,
              success: function (xmlDoc) {
                let oChannels = $(xmlDoc).find("InputProxyChannelStatus");
                console.log('获取数字通道成功', xmlDoc, oChannels)
                $.each(oChannels, function (i, val) {
                  // console.log('self.channels',val)
                // $(val), $(val).find("name"), $(xmlDoc).find("id"), $(val).find("id")
                  let id = $(val).find("id").eq(0).text(),
                  name = $(val).find("name").eq(0).text();
                  // online = $(self).find("online").eq(0).text();
                  // if ("false" == online) {// 过滤禁用的数字通道
                  //     return true;
                  // }
                  if (!name) {
                      name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
                  }
                  self.channels.push({
                      id: id,
                      name: name,
                      online: $(val).find("online").eq(0).text(),
                      // proxyProtocol: $(val).find("proxyProtocol").eq(0).text(),
                      // ipAddress: $(val).find("ipAddress").eq(0).text(),
                  })
                  
                  // self.clickStartRealPlay(id, i)

                  // setTimeout(()=> {
                  //   self.clickStartRealPlay(id, i)
                  // }, 6000)
                  
                });


                // setTimeout(()=> {
                //   self.channels.map((m, index) => {
                //     self.clickStartRealPlay(m.id, index)

                //   })
                // }, 3000)
                self.clickStartRealPlay(this.monitorId ? this.monitorId : null)
                
              },
              error: function (status, xmlDoc) {
                  console.log('获取数字通道失败', status, xmlDoc)
              }
          });

          // // 零通道
          // WebVideoCtrl.I_GetZeroChannelInfo(self.szDeviceIdentify, {
          //     async: false,
          //     success: function (xmlDoc) {
          //         let oChannels = $(xmlDoc).find("ZeroVideoChannel");
          //         console.log('零通道', oChannels)
                  
          //         $.each(oChannels, function (i, val) {
          //             var id = $(xmlDoc).find("id").eq(0).text(),
          //                 name = $(xmlDoc).find("name").eq(0).text();
          //             if ("" == name) {
          //                 name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
          //             }

          //             self.channels.push({
          //                 id: id,
          //                 name: name
          //             })
          //             // if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
          //             //     oSel.append("<option value='" + id + "' bZero='true'>" + name + "</option>");
          //             // }
          //         });
          //         console.log('获取零通道成功', xmlDoc)
          //     },
          //     error: function (status, xmlDoc) {
          //         console.log('获取零通道失败', status, xmlDoc)
          //     }
          // })



        },
        // 获取端口 不会对预览效果造成影响
        getDevicePort() {
            if (!this.szDeviceIdentify) {
              return
            }
            var oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
            console.log('获取通道端口号', oPort)
            if (oPort != null) {
              this.deviceport = oPort.iDevicePort;
              this.iRtspPort= oPort.iRtspPort;
            }
        },
        // 开始预览
        clickStartRealPlay(id, index) {
          let self = this
          console.log(id, index, self.g_iWndIndex, 'ppppp')
            
            // console.log(self.channels[m].id, parseInt(self.channels[m].id, 10),  '坎坎坷坷扩扩扩扩扩扩扩扩')
            let oWndInfo = index ? WebVideoCtrl.I_GetWindowStatus(index) : WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
            iChannelID = id
            // self.channels[m].id

            
            if (!this.szDeviceIdentify) {
                return;
            }
            var startRealPlay = function () {
                WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
                    iWndIndex: index ? index : 0, // 播放窗口
                    iRtspPort: parseInt(self.deviceport, 10), // RTSP端口必须是int
                    iStreamType: 2, // 码流类型：1-主码流 2-子码流 必须int
                    iChannelID: parseInt(iChannelID, 10), // 播放通道 必须int
                    bZeroChannel: false, // 是否播放零通道 默认false
                    success: function () {
                        console.log("预览成功")
                    },
                    error: function (status, xmlDoc) {
                        console.log("预览失败", status, xmlDoc)
                    }
                });
            };
            if (oWndInfo != null) {// 已经在播放了，先停止
                WebVideoCtrl.I_Stop({
                    success: function () {
                        startRealPlay();
                    }
                });
            } else {
                startRealPlay();
            }
        }
    }
}
</script>

<style scoped lang="scss">
#divPlugin {
  // height: calc(100vh - 100px);
  // width: calc(100vh - 200px); 
  width: 100%;
  height: 100%;
}
.monitor-box {
  color: #fff;

  /* height: auto !important; */
  height: 100%;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background-color: #06164a;

  .content {
    height: calc(100% - 1.25rem);
    box-sizing: border-box;
    width: 96%;
    padding: 0.2rem 0;
    margin: 0 auto;
    display: flex;

    .content-left {
      border: 1px solid #1449a3;
      width: 20%;
      .left-content {
        padding: 20px;
        .filter-tree {
          .custom-tree-node {
            width: 100%;
          }
          .node-label {
            display: flex;
            justify-content: space-between;
            .right {
              padding-right: 6px;
            }
          }
          .green {
            color: green
          }
          .red {
            color: #333
          }
          // .right{
          //   float: right;
          // }
        }
      }
    }
    .content-right {
      flex: 1;
      /* height: calc(100% - 0.8rem); */
      height: 100%;
      background: url("../assets/image/mapBg.png") no-repeat top center;
      background-size: 98% 100%;

      .right-title {
        text-align: center;
        line-height: 0.6rem;
        font-size: 0.25rem;

        .icon-right {
          float: right;
          line-height: 0.6rem;
          margin: 0 1rem 0 0;
          font-size: 0.35rem;
          cursor: pointer;
        }
      }
      .right-content {
        margin: 0.25rem 0.3rem;
        height: calc(100% - 1.6rem);
        display: flex;
        flex-wrap: wrap;
        padding: 0.1rem 0 0 0.1rem;

        .pic-box {
          cursor: pointer;
          width: calc(33.33% - 0.1rem);
          height: calc(33.33% - 0.1rem);
          margin: 0 0.1rem 0.1rem 0;
          border: 1px solid #1449a3;
          .pic {
            width: 100%;
            height: 100%;
          }
          .bottom-line {
            background-color: rgba(0, 0, 0, 0.3);
            line-height: 0.35rem;
            position: relative;
            bottom: 0.35rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 15px 0 20px;
            opacity: 0;
            .bottom-title {
              margin-right: 15px;
            }
            .bottom-right {
              font-size: 0.2rem;
            }
          }
        }
        .pic-box:hover {
          .bottom-line {
            opacity: 1
          }
        }
        .big-pic-box {
          width: calc(100% - 0.1rem);
          height: calc(100% - 0.1rem);
        }
      }
    }
  }
}

.line-title {
  text-align: center;
  font-size: 0.22rem;
  padding: 0.051rem 0;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ffffff;
  height: 0.4rem;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 88, 179, 0.99) 51%,
    rgba(0, 88, 179, 0) 100%
  );
}
</style>

<style lang="scss">
.content-left {
  .left-content {

    .el-input {
      background-color: transparent;
      margin-bottom: 20px;
      .el-input__inner {
        background-color: transparent;
        color: #fff;
      }
    }
  }
}




.left-content .el-tree {
  background: transparent;    //将默认背景色进行透明处理
  color: #fff;
  height: calc(100vh - 3.5rem);
  overflow-y: scroll;
  // 不展示滚动条
  &::-webkit-scrollbar {
      display: none;
  }
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: #999;
}
.left-content .el-tree-node__label {    
 font-size: 0.18rem;  //覆盖原有的字体大小
}  
.left-content .el-tree-node__content:hover {   
  background-color: #0056af;  //当鼠标浮动时，进行颜色改变，默认的为白色
} 
.left-content .el-tree-node:focus>.el-tree-node__content {    
 background-color: #0056af;  //当选中树节点时的颜色改变，默认为白色
}

/**/
</style>
